<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
<script src="../AngularJS/angular-1.5.0/angular.min.js"></script>
		<title></title>
	</head>
	<body ng-app="myapp">
		<div ng-controller="myctrl">
			<greeting greet="sayHello(name)"></greeting>
			<greeting greet="sayHello(name)"></greeting>
			<greeting greet="sayHello(name)"></greeting>
			
		</div>
<script>
	var app = angular.module("myapp",[]);
	app.controller("myctrl",function($scope){
		 $scope.sayHello=function(name){
		 	alert("hello"+name);
		 }
	});
	app.directive("greeting",function(){
		return{
			restrict:"AE",
			scope:{
				greet:"&",
			},
			template:'<input type="text" ng-model="username"/>'+
					'<br/>'+
					'<button ng-click="greet({name:username})">click</button>'+
					'<br>'
						
		}
	});
</script>
	</body>
</html>
